<template>
  <div id="Cashier" v-loading="loading">
    <!-- 这是收银台 -->
      <header class="header_title">
        <paymentTitleBar :payTitle="payTitle"></paymentTitleBar>
      </header>
      <div class="cashier_subject" v-if="paymentBool">
        <div class="ca_order">
          <div class="ca_order_left">
            <i class="img_icon el-icon-check"></i>
            <div class="order_left_p">
              <p>{{$t("payment.success")}}<br/></p>
              <p>{{$t("payment.paymentTime1")}}<span>{{countDownList.hou}}{{$t("payment.paymentTime3")}}{{countDownList.min}}{{$t("payment.paymentTime4")}}{{countDownList.sec}}{{$t("payment.paymentTime5")}}</span>{{$t("payment.paymentTime2")}}</p>
            </div>
          </div>
          <div class="ca_order_right">
            <h4>{{$t("MyOrder.AmountPayable")}}：<span>{{orderInformation.sum | decimal}}</span> 元</h4>
            <span @click="orderChe">{{$t("MyOrder.theOrderDetails")}} <i class="el-icon-arrow-down"></i></span>
          </div>
        </div>
        <div class="ca_show" v-show="orderBool">
          <p>{{$t("orderDetails.shippingAddress")}}：{{orderInformation.ShippingAddress.province}} {{orderInformation.ShippingAddress.city}} {{orderInformation.ShippingAddress.area}} {{orderInformation.ShippingAddress.address}}<b class="text_b"></b>{{$t("payment.consignee")}}：{{orderInformation.ShippingAddress.realname}}<b class="text_b"></b>{{orderInformation.ShippingAddress.mobile}}</p>
          <div class="ca_shop">{{$t("payment.name")}}：</div>
          <div class="ca_show_table" v-for="(item, index) in orderlist" :key="index">
            <h5>{{$t("orderDetails.orderNumber")}}：{{item[0]}}</h5>
            <div class="table_div" v-for="data in item" :key="data.goods_id">{{data.title}}</div>
          </div>
          <!-- <table class="ca_show_table" v-for="(item, index) in orderlist" :key="index">
            <tr v-for="data in item" :key="data">
              <td >
                {{data.title}}
              </td>
            </tr>
          </table> -->
          <div class="invoice">{{$t("orderDetails.invoiceInformation")}}： 纸质发票<b class="text_c"></b>{{orderInformation.invoiceText}}</div>
        </div>
        <div class="ca_payment">
          <h4>{{$t("payment.type")}}</h4>
          <ul>
            <li><button @click="weixin" :disabled="disabled"><img src="./../../../public/img/weixin.jpg" alt="" ></button></li>
            <!-- <li><button @click="zhifubao" :disabled="disabled"><img src="./../../../public/img/zhifubao.jpg" alt="" ></button></li>
            <li><button @click="yinlian" :disabled="disabled"><img src="./../../../public/img/yinlian.jpeg" alt="" ></button></li> -->
          </ul>
        </div>
      </div>
      <div class="select_products" v-else>
        <img src="../../../public/img/saleoff-mitu.png" alt="">
        <h3>{{$t("payment.noData")}}</h3>
        <div><router-link to="/">{{$t("payment.home")}}</router-link>|<router-link to="/shopping">{{$t("Transport.return")}}</router-link></div>
      </div>
      <!-- 付款二维码 -->
      <el-dialog :title="PaymentTitle" center :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogTableVisible" @close="closeQrCode" class="dialog_f">
        <div id="qrcode" ref="qrcode" ></div>
      </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";  // 引入qrcode
import paymentTitleBar from "@/components/PaymentTitleBar";
export default {
  data () {
    return {
      loading: true,     // 加载完数据再显示页面
      payTitle: {title: this.$t("payment.title"), id:"payment"}, // 头部标题
      PaymentTitle: "",   // 支付标题
      paymentBool: true,  // 是否有订单付款，有订单付款就显示，没有就不显示
      orderBool: false,  //订单的显示隐藏
      interval: null, // 订单倒计时
      countDownList: {  // 倒计时时间
        hou: "00",
        min: "00",
        sec: "00"
      },  
      actEndTime: 86400,  // 付款时间，秒数，86400秒 一天
      orderInformation: {},  //订单信息
      dialogTableVisible: false,  //是否显示付款二维码
      orderlist: [],  //商品列表
      IntTime: null, // 是否支付成功，计时器
      disabled: false,  // 支付按钮是否禁用
      notpayBool: true, // 生成二维码只调用一次
      orderData: "",    // 订单号，请求生成订单和支付接口的数据
      shopPrice: [],    // 单个店铺总价格，支付接口数据
    }
  },
  components: {
    paymentTitleBar
  },
  methods: {
    // 订单显示隐藏
    orderChe() {
      this.orderBool = this.orderBool ? false : true;
    },
    // 倒计时
    timeFormat(param) {
      // 小于10，数值前面加0，大于10，值就不改变
      return param < 10 ? "0" + param : param;
    },
    // 计时器
    countDown() {
        const Dtime = new Date().getTime();
        this.interval = setInterval( () => {
          // 获取当前时间，同时得到活动结束时间数组
          let newTime = new Date().getTime();
          // 获取结束时间，变成毫秒数
          // let endTime=new Date(this.actEndTime).getTime();
          // 当前时间加上倒计时时间
          let endTime = Dtime + this.actEndTime * 1000;
          let obj = null;
          // 把结束的毫秒数-当前的毫米数，看是否大于0，如果是，就还要倒计时，倒计时未结束，对时间进行处理
          if (endTime - newTime > 0) {
              // (结束的毫秒数-当前的毫米数)/1000 = 倒计时的秒数
              let time = (endTime - newTime) / 1000;
              // 获取天、时、分、秒
              // let day=parseInt(time/(60*60*24));
              let hou = parseInt( time % ( 60 * 60 * 24 ) / 3600 );   // 把倒计时的秒数，进行处理得出 小时
              let min = parseInt( time % ( 60 * 60 * 24 ) % 3600 / 60 );  // 把倒计时的秒数，进行处理得出 分钟
              let sec = parseInt( time % ( 60 * 60 * 24 ) % 3600 % 60 );  // 把倒计时的秒数，进行处理得出 秒数
              obj = {
                // day:this.timeFormat(day),
                hou: this.timeFormat(hou),
                min: this.timeFormat(min),
                sec: this.timeFormat(sec)
              };
          } else { 
              // 活动已结束，全部设置为"00"
              obj = {
                // day:"00",
                hou: "00",
                min: "00",
                sec: "00"
              };
              clearInterval(this.interval);
              // 进行取消订单的操作，请求接口
              if(this.orderInformation.wares.length > 0 && this.orderInformation.wares[0].length > 0) {
                this.paymentBool = false;
                this.$store.commit("order", {});   // 存储空的对象，清除订单数据 vuex
                // this.$get("user/order/cancel",{
                //   openid: this.$Cookie.getCookie("userID"),
                //   order_id: "",
                //   close_reason: "我不想买了"
                // }).then(res=>{
                //   console.log(res)
                // })
              }
              
          }
          this.countDownList = obj;
        }, 1000);
    },
    // 支付成功后的订单数据清除
    dataDump(res) {
      var _this = this;
      clearInterval(_this.IntTime);   // 清除判断是否支付成功定时器
      _this.actEndTime = 0;   // 当前订单付款倒计时清零
      _this.dialogTableVisible = false;  //关闭二维码弹框
      _this.$store.commit("order", {});   // 清空订单信息，vuex
      _this.$store.commit("orderSMS", null);    // 清空店铺手机号
      _this.$store.commit("paymentSuccessList", res.data);    // 订单支付成功返回的数据，存储到vuex，在订单付款成功页面进行判断
      _this.$router.push({"path": "/paymentSuccessful"});   // 跳转到支付成功页面
    },
    // 生成二维码
    qrcode(url) {
      new QRCode("qrcode", {
        width: 200,  
        height: 200,
        text: url, // 二维码地址
        correctLevel: QRCode.CorrectLevel.Q,  //降低检验级别
      })
      document.getElementById("qrcode").removeAttribute("title");
      // $("#qrcode").removeAttr("title");
    },
    // 关闭微信二维码
    closeQrCode() {
      var _this = this;
      clearInterval(_this.IntTime);   // 清除判断是否支付成功定时器
      _this.disabled = true;  // 微信支付按钮禁用
      // 关闭后，延时1秒再接触支付按钮的禁用，防止点击频繁
      setTimeout(function(){
        _this.disabled = false;  // 支付按钮解除禁用
      }, 1000)
      _this.dialogTableVisible = false;  // 关闭弹框
      _this.$refs.qrcode.innerHTML = ""; // 清空弹框内容
      _this.notpayBool = true;
    },
    // 微信支付
    weixin() {
      var _this = this;
      _this.disabled = true;  // 微信支付按钮禁用
      // _this.PaymentTitle = "微信支付";
      // 把倒计时的小时，分钟，秒数 相加得到的时间是否大于0，大于就还有时间
      if(_this.countDownList.hou * 60 * 60 + _this.countDownList.min * 60 + _this.countDownList.sec > 0) {
        if(_this.orderlist.length <= 1) {
          // 商品列表小于或者等于1，说明只有一个店铺
          _this.orderInformation.orderCode = "";
        }
        let brandPhone = _this.$store.state.SMS;
        let realname = _this.orderInformation.ShippingAddress.realname;
        let mobile = _this.orderInformation.ShippingAddress.mobile;
        // 获取微信订单，是否支付成功
        _this.$post("pay/wx/", {
          ordersn: _this.orderData,  // 订单号
          total_price: JSON.stringify(_this.orderInformation.sum),   // 订单总价
          temporary_ordersn: _this.orderInformation.orderCode,   // 临时订单号
          user_name: realname,
          user_phone: mobile,
          brand_phone: brandPhone,
          price: _this.shopPrice
        }).then((res)=>{
          switch (res.msg) {
            case "SUCCESS":
              _this.dataDump(res);   // 支付成功后，订单数据清除
              break;
            case "NOTPAY":
              _this.PaymentTitle = _this.$t("payment.scanQRCode");
              // _this.PaymentTitle = "微信扫码支付";
              _this.dialogTableVisible = true;      // 打开微信二维码弹框
              // 调用生成二维码方法
              _this.$nextTick (function () {
                _this.qrcode(res.data.code_url);
              })
              _this.IntTime = setInterval(function(){
                _this.$post("pay/wx/", {
                  ordersn: _this.orderData,  // 订单号
                  total_price: JSON.stringify(_this.orderInformation.sum),   // 订单总价
                  temporary_ordersn: _this.orderInformation.orderCode,   // 临时虚假订单
                  user_name: realname,
                  user_phone: mobile,
                  brand_phone: brandPhone,
                  price: _this.shopPrice
                }).then((res)=>{
                  switch (res.msg) {
                    case "SUCCESS":
                      _this.dataDump(res);   // 支付成功后，订单数据清除
                      break;
                    // case "NOTPAY":
                    //   console.log("");
                    //   break;
                    // case "REFUND":
                    //   console.log("");
                    //   break;
                    case "FAIL":
                      _this.disabled = false;  // 微信支付按钮启用
                      break;
                    default:
                      _this.disabled = false;  // 微信支付按钮启用
                      break;
                  }
                })
              }, 2300)
              break;
            case "REFUND":
              clearInterval(_this.IntTime);   // 清除判断是否支付成功定时器
              _this.$MessageAlert(true, "订单退款了", "error");
              break;
            case "FAIL":
              clearInterval(_this.IntTime);   // 清除判断是否支付成功定时器
              _this.$MessageAlert(true, "订单不存在", "error");
              break;
            default:
              console.log("");
              break;
          }
        })
      }
    },
    // 支付宝支付
    zhifubao() {
      this.disabled = true;
    },
    // 银联，银行卡支付
    yinlian() {
      this.disabled = true;
    },
    // 处理订单支付结束的时间，截取订单时间加上结束时间 减去 本地时间就是剩下的时间
    endTime() {
      if(this.orderlist[0][0] != undefined && this.orderlist[0].length > 0) {
        let tiem = this.orderlist[0][0].substr(2, 14);
        let fullYear = tiem.substr(0, 4);  // 年
        let month = tiem.substr(4, 2);  // 月
        let day = tiem.substr(6, 2);  // 日
        let hours = tiem.substr(8, 2);  // 时
        let minutes = tiem.substr(10, 2);  // 分
        let seconds = tiem.substr(12, 2);  // 秒
        let orderTiem = new Date(fullYear+"/"+month+"/"+day+" "+hours+":"+minutes+":"+seconds).getTime() / 1000 + 86400;    // 订单支付结束时间秒数，订单时间 + 结束秒数 86400 一天
        let newTiem = Math.floor(new Date().getTime() / 1000);      // 本地时间秒数

        this.actEndTime = orderTiem - newTiem;    // 订单支付结束时间 减去 本地时间，剩下的秒数
      }
    },
  },
  filters: {
    // 价格，保留两位小数
    decimal(n) {
      return n.toFixed(2);
    },
  },
  created() {
    var _this = this;
    let tranArr = _this.$store.state.paymentOrder;  // vuex的订单信息
    _this.disabled = false;  // 微信支付按钮启用
    let goodNum = _this.$store.state.goodNum;   // vuex的购物车商品goods_id
    _this.$store.commit("checkS", []);  // 给空数组，清空 确认订单里面的商品数据
    let arrID = "";   // 购物车商品id，拼接字符串，用来请求购物车接口删除商品
    let goodsID = [];   // 要删除的商品goods_id，数组，判断vuex里面的购物车商品，相同的删掉
    let arrorder = [];  // 订单号，存储在vuex的订单号数组
    let AOrder = "";    // 请求生成订单的订单号
    let merchID = "";   // 店铺id，数组，请求接口
    let price = "";     // 商品单价
    let num = "";     // 商品购买数量
    let title = "";     // 商品名称
    let leavingMText = "";    // 给店家留言
    let taxNumber = "";       // 发票
    let shopPriceDate = null;       // 单个店铺总价格，格式："2,5"
    
    if(tranArr.wares != undefined && tranArr.wares.length > 0) {
      // 商品数组店铺少于1个，但是要判断商品数组的店铺商品是否少于1个
      // 判断商品数组店铺是否有1个以上，有就循环，没有再判断单个店铺里面的商品数量
      if (tranArr.wares.length > 1) {
        for (let k = 0; k < tranArr.wares.length; k++) {
          shopPriceDate = null;       // 单个店铺总价格，格式："2,5"
          arrorder.push(tranArr.wares[k][0]);   // 订单号
          for (let y = 1; y < tranArr.wares[k].length; y++) {
            shopPriceDate += (Number(tranArr.wares[k][y].min_price) * Number(tranArr.wares[k][y].num));
            arrID += tranArr.wares[k][y].id + ",";    // 请求删除商品接口的数据,商品id
            goodsID.push(tranArr.wares[k][y].goods_id);   // 删除vuex的购物车商品的数据，商品goods_id
            AOrder += tranArr.wares[k][0] + ",";    // 请求生成订单的数据，订单号
            merchID += tranArr.wares[k][1].merch_id + ",";    // 请求生成订单的数据，店铺id
            price += tranArr.wares[k][y].min_price + ",";    // 请求生成订单的数据，商品单价
            num += JSON.stringify(tranArr.wares[k][y].num) + ",";      // 请求生成订单的数据，商品购买数量
            title += tranArr.wares[k][y].title + ",";    // 请求生成订单的数据，商品名称
            leavingMText +=  tranArr.leavingMText + ",";    // 留言为空，也要对应下标
            if(tranArr.invoiceTitle == "个人") {
              taxNumber += "[纸质]"+tranArr.invoiceText+"（"+tranArr.invoiceTitle+"）,"
            } else if(tranArr.invoiceTitle == "单位") {
              taxNumber += "[纸质]"+tranArr.invoiceText+"（"+tranArr.invoiceTitle+":"+tranArr.taxNumber+"）,"
            }
          }
          _this.shopPrice.push(shopPriceDate);
        }
        _this.shopPrice = _this.shopPrice.join();
      } else {
        // 当店铺只有1个的时候，虚假订单号，请求接口数据为空
        if(tranArr.PageID == "Shopping") {
          tranArr.orderCode = "";
        }
        // 商品数组店铺少于1个，但是要判断商品数组的店铺商品是否少于1个
        if(tranArr.wares[0].length > 1) {
          for (let s = 1; s < tranArr.wares[0].length; s++) {
            shopPriceDate += (Number(tranArr.wares[0][s].min_price) * Number(tranArr.wares[0][s].num));
            arrID += tranArr.wares[0][s].id + ",";
            arrorder.push(tranArr.wares[0][0]);   // 订单号
            goodsID.push(tranArr.wares[0][s].goods_id); 

            AOrder += tranArr.wares[0][0] + ",";    // 请求生成订单的数据，订单号
            merchID += tranArr.wares[0][1].merch_id + ",";    // 请求生成订单的数据，店铺id
            price += tranArr.wares[0][s].min_price + ",";    // 请求生成订单的数据，商品单价
            num += JSON.stringify(tranArr.wares[0][s].num) + ",";      // 请求生成订单的数据，商品购买数量
            title += tranArr.wares[0][s].title + ",";    // 请求生成订单的数据，商品名称
            leavingMText +=  tranArr.leavingMText + ",";    // 留言为空，也要对应下标
            if(tranArr.invoiceTitle == "个人") {
              taxNumber += "[纸质]"+tranArr.invoiceText+"（"+tranArr.invoiceTitle+"）,"
            } else if(tranArr.invoiceTitle == "单位") {
              taxNumber += "[纸质]"+tranArr.invoiceText+"（"+tranArr.invoiceTitle+":"+tranArr.taxNumber+"）,"
            }
          }
          _this.shopPrice = shopPriceDate;
        } else {
          goodsID.push(tranArr.wares[0][1].goods_id);
          arrID = tranArr.wares[0][1].id;
        }
      }
      arrID = arrID.substr(0, arrID.length-1);
      AOrder = AOrder.substr(0, AOrder.length-1);
      merchID = merchID.substr(0, merchID.length-1);
      price = price.substr(0, price.length-1);
      num = num.substr(0, num.length-1);
      title = title.substr(0, title.length-1);
      _this.orderData = AOrder;
      leavingMText = leavingMText.substr(0, leavingMText.length-1);
      taxNumber = taxNumber.substr(0, taxNumber.length-1);
        
      _this.orderInformation = tranArr;   // 订单信息
      _this.orderlist = tranArr.wares;  // 商品列表
      _this.endTime();      // 调用订单支付结束时间
      _this.countDown();   // 调用订单付款倒计时
// ---------------------------------------------
      // 判断是从，购物车进入，还是从我的订单进入，购物车进入有临时订单，从我的订单进入没有临时订单
      if(tranArr.PageID == "Shopping") {
        // 循环判断，购物车商品id和订单商品id，相同的就删掉，因为已经下单在待付款，所以要删掉
        for (let j = 0; j < goodsID.length; j++) {
          for (let k = 0; k < goodNum.length; k++) {
            if(goodsID[j] == goodNum[k].goods_id) {
              goodNum.splice(k, 1);
              k--;
            }
          }
        }
        // 判断goodNum购物车的商品数组是否还有数据，有就存储，没有就赋值空
        if(goodNum.length > 0) {
          _this.$store.commit("goods", goodNum);
        } else {
          _this.$store.commit("goods", []);
        }
        // 删除已经进入收银台的，购物车商品
        _this.$dele(`cart/${_this.$Cookie.getCookie("userID")}?id=${arrID}`
        ).then(()=>{
          
        })
        // 请求生成订单后台接口
        _this.$post("user/order", {
          openid: _this.$Cookie.getCookie("userID"),  // openid
          ordersn: AOrder,  // 订单号
          merch_id: merchID,   // 店铺id
          goods_id: goodsID.toString(), // 商品id
          title: title,   // 商品名称
          price: price,   // 商品单价
          num: num,   // 购买数量
          total_price: JSON.stringify((tranArr.sum)),    // 订单总价
          address_id: JSON.stringify(tranArr.ShippingAddress.id),   // 收货地址id
          remark: leavingMText,     // 给店家的留言
          invoice: taxNumber,       // 发票信息
          temporary_ordersn: tranArr.orderCode      // 临时订单号
        }).then(()=>{
          _this.loading = false;
        })

      } else if(tranArr.PageID == "MyOrder" || tranArr.PageID == "OrderDetails") {
        // 从 "我的订单" 或者 "订单详情" 页面进入支付页面
        // 判断是否在待付款状态，并有临时订单号，才请求接口
        if(tranArr.order_status === 0 && tranArr.orderCode !== "") {
          // 只有待付款状态下的订单，并有临时订单号，才请求这个接口，有临时订单号就表示是多个店铺一起生成的订单，没有临时订单号表示只有一个店铺生成的订单
          // 请求生成订单后台接口
          _this.$post("pay/pending/wx", {
            ordersn: AOrder,  // 订单号
            total_price: JSON.stringify((tranArr.sum)),    // 订单总价
          }).then(()=>{
            _this.loading = false;
          })
        } else {
          _this.loading = false;
        }
      }
    } else {
      _this.paymentBool = false;
      _this.loading = false;
      _this.orderInformation = {
        ShippingAddress: {
          id:"", 
          isdefault: "", 
          realname: "", 
          mobile: "", 
          province: "", 
          city:"", 
          area:"", 
          address: ""
        },
        invoiceText: "",
        invoiceTitle: "",
        orderCode: "",
        sum: "",
      }
    }
  },
  destroyed() {
    clearInterval(this.interval);
  },
}
</script>

<style lang="less" scoped>
p,h3,h4{margin: 0px;padding: 0px;}
#Cashier {
  min-width: 960px;
}
.el-icon-arrow-down {
  color: black;
}
// 主体
.cashier_subject {
  width: 53%;
  padding: 20px;
  padding-top: 50px;
  border: 1px solid #ccc;
  border-top: 0px;
  min-width: 960px;
  margin: auto;
  margin-bottom: 100px;
  .ca_order {
    // border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    .ca_order_left {
      position: relative;
      .img_icon {
        // display: inline-block;
        font-size: 40px;
        position: absolute;
        color: #83c44e;
        top: 5px;
        left: 0px;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 45px;
        border: 2px solid #83c44e;
        border-radius: 50%;
      }
      .order_left_p {
        padding-left: 70px;
        span {
            color: #ff4d4d;
        }
        p {
          margin: 5px;
        }
      }
      
    }
    .ca_order_right {
      text-align: right;
      h4 {
        text-transform: none;
        color: #666;
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 15px;
        span {
          color: #ff4d4d;
          font-size: 20px;
        }
      }
      span {
        cursor: pointer;
        color: #666;
        text-decoration: none;
        font-size: 13px;
      }
    }
  }
}
.ca_show {
  border-top: 1px solid #ccc;
  padding-top: 15px;
  margin-bottom: 50px;
  p {
    margin-top: 10px;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .text_b {
    width: 25px;
    display: inline-block;
  }
  .text_c {
    width: 10px;
    display: inline-block;
  }
  .ca_shop{
    color: #555;
    width: 70px;
    float: left; 
    line-height: 30px;
  }
  .ca_show_table {
    padding: 8px;
    padding-top: 5px;
    margin: 8px 0px 12px 70px !important;
    width: 420px;
    border-bottom: 1px solid #ccc;
    color: #555;
    h5 {
      text-transform: none;
      color: #555;
      margin-top: 0px;
      font-size: 15px;
      margin-bottom: 10px;
    }
    .table_div {
      color: #555;
      line-height: 25px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
  .invoice {
    color: #555;
    margin-top: 5px;
    line-height: 30px;
  }
}
.ca_payment {
  margin-top: 100px;
  margin-bottom: 50px;
  h4 {
    text-transform: none;
    margin-bottom: 40px;
    font-size: 20px;
    color: #696969;
  }
  ul {
    display: flex;
    li {
      width: 150px;
      border: 1px solid #ccc;
      text-align: center;
      height: 69px;
      margin-left: 45px;
      button {
        // cursor: pointer;
        width: 100%;
        height: 100%;
        text-decoration: none;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}
.select_products {
  color: #444;
  width: 950px;
  margin: auto;
  padding: 60px 60px;
  text-align: center;
  // padding-bottom: 100px;
  h3 {
    margin-top: 30px;
    margin-bottom: 25px;
  }
  a {
    margin: 0px 15px;
  }
}
/deep/ .el-dialog {
  margin-top: 21vh !important;
  width: 450px;
}
/deep/ .el-dialog__body {
  padding-top: 15px;
}
#qrcode {
  display: inline-block;
  margin-left: 100px;
  margin-top: 35px;
  margin-bottom: 40px;
}
</style>